<template>
	<div class="body-content" v-loading="loading" element-loading-text="拼命加载中">
		<!--     <el-menu style="padding-left: 130px" theme="dark" :unique-opened="true" :default-active="activeName" class="el-menu-demo" mode="horizontal" @select="selectMenuHandle">
        <template v-for="item in navDatas">
          <el-submenu :index="item.linkUrl+';'+item.orderId+';'+item.menuname">
            <template slot="title"><li :class="item.icon"></li>{{item.menuname}}</template>

            <template v-for="subItem in item.Children">
              <el-menu-item v-if="!subItem.Children || subItem.Children.length === 0" :index="subItem.linkUrl+';'+subItem.orderId+';'+subItem.menuname"><li :class="subItem.icon"></li>{{subItem.menuname}}</el-menu-item>
            </template>
          </el-submenu>
        </template>
    </el-menu> -->
    <multi-menu v-if="flag" :menu-object="navDatas" @changeView="selectMenuHandle"></multi-menu>
    <!--主区域内容-->
    <section id="mainContent">
    	<components ref="views" :is="currentView" :sub-args="subArgs" v-on:changeView="changeView" v-on:backPrev="backPrev" v-on:getSelfDistrict="getDatas" v-on:deleteCurrentDistrict="deleteCurrentDistrict"></components>
    </section>
</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, Animation, HttpServer } from '../../assets/js/common.js'
	import multiMenu from '../../components/multi-menu.vue'
	/****设备管理****/
	const QueryMiniLibrary = resolve => require(['./DeviceManagement/DeviceList/Index.vue'], resolve)
	const AddMiniLibrary = resolve => require(['./DeviceManagement/AddDevice/Index.vue'], resolve)
	const DevicePreserve = resolve => require(['./DeviceManagement/DevicePreserve/Index.vue'], resolve)
	const DeviceUpgradeManagement = resolve => require(['./DeviceManagement/DeviceUpgradeManagement/Index.vue'], resolve)
	const AutoDetect = resolve => require(['./DeviceManagement/AutoDetect/Index.vue'], resolve)

	/****图书流通****/
	const ReaderManagement = resolve => require(['./BookCirculate/ReaderManagement/Index.vue'], resolve)
	const BookManagement = resolve => require(['./BookCirculate/BookManagement/BookList/Index.vue'], resolve)
	const BookPreborrowManagement = resolve => require(['./BookCirculate/BookManagement/BookPreborrowManagement/Index.vue'], resolve)
	const BorrowAndReturn = resolve => require(['./BookCirculate/BookManagement/BorrowAndReturnManagement/Index.vue'], resolve)
	const BorrowAndReturnExp = resolve => require(['./BookCirculate/BookManagement/BorrowAndReturnException/Index.vue'], resolve)
	const BookShelf = resolve => require(['./BookCirculate/BookShelfList/Index.vue'], resolve)
	const LibraryLocation = resolve => require(['./BookCirculate/LibraryLocationList/Index.vue'], resolve)//馆藏地
	const MobileInventoryRanking = resolve => require(['./BookCirculate/MobileInventoryRanking/Index.vue'], resolve)

	/****信息发布****/
	const MediaManagement = resolve => require(['./InformationDelivery/ResourceManagement/MediaManagement/Index.vue'], resolve)
	const APKManagement = resolve => require(['./InformationDelivery/ResourceManagement/APKManagement/Index.vue'], resolve)
	const FirmwareManagement = resolve => require(['./InformationDelivery/ResourceManagement/FirmwareManagement/Index.vue'], resolve)
	const NetResourceManagement = resolve => require(['./InformationDelivery/ResourceManagement/NetSourceManagement/Index.vue'], resolve)
	const CalibrationFile = resolve => require(['./InformationDelivery/ResourceManagement/CalibrationFileManagement/Index.vue'], resolve)
	const AnnouncementManagement = resolve => require(['./InformationDelivery/OPACNoticeManagement/Index.vue'], resolve)
	const AdLed = resolve => require(['./InformationDelivery/AdLedManagement/Index.vue'], resolve)
	const BroadCast = resolve => require(['./InformationDelivery/BroadcastManagement/Index.vue'], resolve)

	/****电子课表****/
	const CourseTable = resolve => require(['./CourseTable/CourseTableList/Index.vue'], resolve)
	const OrderSet = resolve => require(['./CourseTable/OrderList/Index.vue'], resolve)
	const HolidaySet = resolve => require(['./CourseTable/Holiday/Index.vue'], resolve)
	const SysHoliday = resolve => require(['./CourseTable/LegalHolidays/Index.vue'], resolve)

	/****日志****/
	const OpManagement = resolve => require(['./LogManagement/OpManagement/Index.vue'], resolve)
	const DeviceControlManagemen = resolve => require(['./LogManagement/DeviceControlManagement/Index.vue'], resolve)
	const SystemLogManagement = resolve => require(['./LogManagement/SystemLogManagement/Index.vue'], resolve)
	const DebugLogManagement = resolve => require(['./LogManagement/DebugLog/Index.vue'], resolve)
	
	/****用户管理****/
	const UserList = resolve => require(['./UserManagement/UserList/Index.vue'], resolve)
	const RoleList = resolve => require(['./UserManagement/RoleList/Index.vue'], resolve)

	/****系统****/
	const DistrictManagement = resolve => require(['./System/DistrictList/Index.vue'], resolve)
	const SystemSetting = resolve => require(['./System/SettingList/Index.vue'], resolve)
	const BackServer = resolve => require(['./System/BackServer/Index.vue'], resolve)
	const BackUpList = resolve => require(['./System/BackUpList/Index.vue'], resolve)//配置文件

	/****数据统计****/
	const DeviceUsedSumary = resolve => require(['./DataStatistic/DeviceUsed/Index.vue'], resolve)
	const PowerUsedSumary = resolve => require(['./DataStatistic/PowerUsed/Index.vue'], resolve) 
	const ClassStatistics = resolve => require(['./DataStatistic/ClassStatistics/Index.vue'], resolve)//上下课统计
	export default {
		components: {
			QueryMiniLibrary, //设备列表
			AddMiniLibrary, //添加设备
			AutoDetect,//自动循检
			UserList, //用户列表
			RoleList,//用户权限
			DevicePreserve, //版本升级
			ReaderManagement, //读者管理
			BookManagement, //图书管理
			OpManagement, //操作记录
			DeviceControlManagemen, //设备操作记录
			MediaManagement, //媒体文件
			APKManagement, //APK文件
			FirmwareManagement, //固件管理
			CalibrationFile,//标定文件
			AnnouncementManagement, //通告
			BookPreborrowManagement, //预借管理
			BorrowAndReturn, //借还管理
			SystemLogManagement, //系统日志
			DeviceUpgradeManagement, //设备升级
			DistrictManagement, //区域管理
			SystemSetting, //系统设置
			BookShelf, //层架信息
			LibraryLocation,//馆藏地
			DeviceUsedSumary, //设备使用统计
			BorrowAndReturnExp, //借还异常记录
			MobileInventoryRanking, //移动盘点工作量统计
			NetResourceManagement, //网络资源
			BroadCast, //广播管理
			CourseTable, //电子课表
			OrderSet, //模板
			HolidaySet, //节假日
			AdLed, //广告屏
			multiMenu, //菜单
			PowerUsedSumary, //耗电统计
			SysHoliday,
			DebugLogManagement,//调试日志
			BackServer,//系统服务
			BackUpList,//设备配置文件
			ClassStatistics//上下课统计
		},
		data() {
			return {
				// hasLogin:false,
				loading: false,
				navDatas: {},
				menuList: [],
				horizonMenuList: [],
				activeName: 'QueryMiniLibrary;1;设备列表',
				currentView: '',
				preView: [],
				subArgs: {},
				navArgs: [],
				indexView: '',
				currentLanguage: this.$t('message.cnLanguage'),
				otherLanguage: this.$t('message.enLanguage'),
				nickName: '测试',
				horizonActive: 0,
				//currentHorizon:null,
				uid: 'admin',
				initTime: true,
				currentScrollTop: 0,
				flag: false
			}
		},
		methods: {
			generateSubargsObj(array) {
				var obj = {};
				array.forEach(function(item, index) {
					switch(index) {
						case 0:
						obj.view = item;
						break;
						case 1:
						obj.id = item;
						break;
						case 2:
						obj.name = item;
						break;
					}
				});
				return obj;
			},
			selectMenuHandle(viewStr) {
				var argsObj = this.generateSubargsObj(viewStr.split(";"));
				// console.log(argsObj)
				this.changeView(argsObj.view, argsObj.name);
			},
			changeView(view, name) {
				GloabFun.clearRecordPreview.call(this);
				this.subArgs.CurrentView = name;
				Animation.animation($("#mainContent"), function() {
					this.currentView = view;
				}.bind(this));
			},
			/*pushPreView(){
			   this.preView.push(this.currentView);
			},*/
			backPrev() {},
			formateMenuList(menus) {
				this.orederMenu(menus);
				var array = [],
				temp = '',
				tempArray = [],
				tempObj = {};
				if(menus.length > 0) {
					for(var i = 0; i < menus.length; i++) {
						if(temp != '') {
							if(temp === menus[i].Area) {
								tempArray.push(menus[i]);
								if(i === menus.length - 1) {
									tempObj.title = temp;
									tempObj.list = tempArray;
									array.push(tempObj);
								}
							} else {
								tempObj.title = temp;
								tempObj.list = tempArray;
								array.push(tempObj);
								tempArray = [];
								tempObj = {};
								tempArray.push(menus[i]);
								temp = menus[i].Area;
								if(i === menus.length - 1) {
									tempObj.title = temp;
									tempObj.list = tempArray;
									array.push(tempObj);
								}
							}
						} else {
							temp = menus[i].Area;
							tempArray.push(menus[i]);
							if(i === menus.length - 1) {
								tempObj.title = temp;
								tempObj.list = tempArray;
								array.push(tempObj);
							}
						}
					}
				}
				return array;
			},
			orederMenu(menus) {
				Array.prototype.slice.call(menus);
				//var tempArray=menus.concat([]);
				menus.sort(function(a, b) {
					return a.Order - b.Order || a.AreaSort - b.AreaSort;
				});
			},
			editPassword() {
				this.preView.length = 0;
				if(this.horizonActive === 0) {
					this.preView.push(this.indexView);
				} else {
					this.preView.push("Menus");
				}

				this.subArgs.CurrentView = this.$t('message.resetPassword');
				GloabFun.clearRecordPreview.call(this);
				Animation.animation($("#mainContent"), function() {
					this.currentView = "editPassword";
					$("#mainContent").removeClass("grey-bg");
				}.bind(this));
			},
			deleteCurrentDistrict(Id) {
				if(Id.toString() === this.activeName) {
					this.activeName = '';
				}
			},
			//获取菜单
			getDatas() {
				if(GloabFun.getRole() != '') {
					this.loading = true;
					HttpServer.httpGet.call(this, '/Api/Menu/MenuByRole?role=' + GloabFun.getRole(), function(response) {}, function(response) {
						this.loading = false;
						if(response.data.code === 0) {
							this.navDatas.item = response.data.info;
							this.flag = true;
							// console.log(this.navDatas)
							this.subArgs.CurrentView = response.data.info[0].Children[0].menuname;
							this.currentView = response.data.info[0].Children[0].linkUrl;
							this.activeName = response.data.info[0].Children[0].linkUrl + ';' + response.data.info[0].Children[0].orderId + ';' + response.data.info[0].Children[0].menuname;
							this.selectMenuHandle(this.activeName);
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				} else {
					this.$router.push({
						path: '/Login'
					});
				}
			},
			//按照orderId大小排序
			sortDatas(arr) {
				for(var i=0;i<arr.length;i++){
					for(var j = i + 1;j<arr.length;j++){
						if(arr[i].orderId>arr[j].orderId){
							var tmp = arr[i];
							arr[i] = arr[j];
							arr[j] = tmp;
						}
					}
				}
				return arr;
			},
			getNewDatas(){
				if(GloabFun.getUid() != '') {
					this.loading = true;
					HttpServer.httpGet.call(this, '/Api/Menu/LoginMenu?userKeyId=' + GloabFun.getKeyId(), function(response) {}, function(response) {
						this.loading = false;
						if(response.data.code === 0) {
							this.navDatas.item = this.sortDatas(response.data.info);
							this.flag = true;
							// console.log(this.navDatas)
							this.subArgs.CurrentView = response.data.info[0].Children[0].menuname;
							this.currentView = response.data.info[0].Children[0].linkUrl;
							this.activeName = response.data.info[0].Children[0].linkUrl + ';' + response.data.info[0].Children[0].orderId + ';' + response.data.info[0].Children[0].menuname;
							this.selectMenuHandle(this.activeName);
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				} else {
					this.$router.push({
						path: '/Login'
					});
				}
			}
		},
		mounted() {
			this.getNewDatas();
			/****测试数据****/
			// this.hasLogin = true;
			// this.flag = true;
			// this.menuList.push({
			// 	orderId: 1,
			// 	menuname: '设备管理',
			// 	icon: 'el-icon-eleg-icon_cogs el-icon--left',
			// 	linkUrl: '',
			// 	Children: [{
			// 		orderId: 2,
			// 		menuname: '统计链接',
			// 		icon: 'el-icon-eleg-icon_grid-3x3 el-icon--left',
			// 		linkUrl: '',
			// 		Children: [
			// 		{
			// 			orderId: 1,
			// 			menuname: '馆情数据统计',
			// 			icon: 'el-icon-eleg-icon_clipboard el-icon--left',
			// 			linkUrl: 'LibraryDataStatistic'
			// 		},
			// 		{
			// 			orderId: 2,
			// 			menuname: '设备使用统计',
			// 			icon: 'el-icon-eleg-icon_flowchart_alt el-icon--left',
			// 			linkUrl: 'DeviceDataStatistic'
			// 		},
			// 		{
			// 			orderId: 3,
			// 			menuname: '流通数据统计',
			// 			icon: 'el-icon-share el-icon--left',
			// 			linkUrl: 'CirculateDataStatistic'
			// 		}
			// 		]
			// 	}]
			// });
			// this.navDatas.item = this.menuList;
		},
		created() {

		}
	}
</script>
<style lang="less">
	#dep-content {
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
	}

	.el-submenu .el-menu-item {
		min-width: 100%;
	}

	.el-pagination__editor {
		width: 35px !important;
	}

	.el-pagination .el-select .el-input {
		width: 90px !important;
	}

	.el-menu--horizontal .el-submenu .el-submenu__title {
		height: 50px;
		line-height: 50px;
	}

	.el-menu--horizontal .el-submenu>.el-menu {
		top: 50px;
		padding: 0 0;
	}

	#dep-title {
		width: 100%;
		height: 5%
	}
</style>
<style scoped lang="less">
	@headerH: 60PX;
	.is-first-active {
		// background-color: rgba(32,160,255,0.8) !important;
		color: rgba(32, 160, 255, 0.8) !important;
	}
	
	.body-content {
		// padding: 0 15px;
		height: e("calc(100% - 65px)");
		#leftNav {
			height: 100%;
			float: left;
			.el-menu-item.is-active,
			.el-menu-item.sub_item.is-active {
				// background-color: rgba(32,160,255,0.8) !important;
				color: rgba(32, 160, 255, 0.8) !important;
			}
			#navList {
				height: 100%;
			}
			.sub-item {
				padding-left: 20px;
				font-size: 15px
			}
		}
		#mainContent {
			// background-color: #F0F0F0;
			height: 100%;
			padding: 5px 160px;
			// margin-bottom: 20px;
			// float:right;
		}
		.content {
			height: 100%;
			width: 30px;
		}
	}
	
	@media screen and (max-width: 900px) {
		#leftNav {
			width: 150px !important;
		}
		#mainContent {
			// background-color: #F0F0F0;
			padding: 5px 120px;
			// background-color: #eef1f6;
			width: e("calc100%") !important;
			// overflow:auto;
			height: 100%;
		}
	}
	@media screen and (max-width: 780px) {
        #mainContent {
            padding: 5px 0px !important;
        }
    }
	@media screen and (min-width: 900px) {
		#leftNav {
			width: 220px !important;
		}
		#mainContent {
			// background-color: #F0F0F0;
			padding: 5px 160px;
			// background-color: #eef1f6;
			width: e("calc100%") !important;
			// overflow:auto;
			height: 100%;
		}
	}
</style>